<template>
  <Dialog
    v-model="dialogVisible"
    width="500px"
    max-height="100px"
    title="导入"
    :before-close="() => closeDialog()"
  >
    <div class="flex justify-center flex-items-center h-100px">
      <el-button type="danger" link size="small" @click="handDownloadTemp">
        （没有模板？点我下载模板）
      </el-button>
    </div>
    <template #footer>
      <div class="flex flex-items-center justify-end">
        <el-button class="m-r-4" @click="closeDialog">
          {{ t('system.parameterConfig.cancel') }}
        </el-button>
        <UploadFile
          url="/admin/inventory/importPrice"
          :upload-file-button-name="t('action.importFile')"
          :file-type="['xls', 'xlsx']"
          :limit="1"
          :full-loading="true"
          :button-width="65"
          token-key="X-token"
          @upload-success-res="handleExportSuccess"
        />
      </div>
    </template>
  </Dialog>
  <!--  导入日志-->
  <DialogImportLogs ref="DialogImportLogsRef" />
</template>
<script setup lang="ts">
import DialogImportLogs from '../DialogImportLogs/index.vue'
import UploadFile from '@/components/UploadFile/index.vue'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { getImportTemplateApi } from '@/api/warehouse/merchandiseOffers'
import dayjs from 'dayjs'

const emit = defineEmits(['refresh'])
const { t } = useI18n()

const dialogVisible = ref<boolean>(false)

const DialogImportLogsRef = ref<InstanceType<typeof DialogImportLogs>>()

const handDownloadTemp = async () => {
  await getImportTemplateApi(
    {
      name: 'importPrice',
      ext: 'xlsx'
    },
    `商品报价模板_${dayjs().format('YYYY.MM.DD')}.xlsx`
  )
}

const handleExportSuccess = (resp: Record<string, any>) => {
  nextTick(() => {
    DialogImportLogsRef!.value!.dialogVisible = true
    DialogImportLogsRef.value?.getBackShow(resp)
  })
  closeDialog()
  emit('refresh')
}

const closeDialog = () => {
  dialogVisible.value = false
}

defineExpose({
  dialogVisible
})
</script>
<style lang="less" scoped></style>
